import React from 'react';
import PropTypes, { oneOfType } from 'prop-types';
import { TouchableOpacity, Text, StyleSheet } from 'react-native';
import { sizes, colors } from 'bee/themes';
import { px2dp } from 'bee/utils/px2dp';

const Button = ({ text, onPress, containerStyle, textStyle }) => (
  <TouchableOpacity
    onPress={onPress}
    style={[buttonStyle.containerStyle, containerStyle]}
  >
    <Text style={[buttonStyle.textStyle, textStyle]}>{text}</Text>
  </TouchableOpacity>
);

Button.propTypes = {
  text: PropTypes.string.isRequired,
  onPress: PropTypes.func.isRequired,
  containerStyle: oneOfType([PropTypes.number, PropTypes.array]).isRequired,
  textStyle: oneOfType([PropTypes.number, PropTypes.array]).isRequired,
};

const primaryBtnStyle = StyleSheet.create({
  containerStyle: {
    height: px2dp(120),
    width: '100%',
  },
  textStyle: {
    fontSize: sizes.f4,
  },
});

const PrimaryBtn = ({ bgc, fontColor, ...props }) => {
  const cStyle = [primaryBtnStyle.containerStyle, { backgroundColor: bgc }];
  const tStyle = [primaryBtnStyle.textStyle, { color: fontColor }];

  return <Button containerStyle={cStyle} textStyle={tStyle} {...props} />;
};

PrimaryBtn.propTypes = {
  text: PropTypes.string.isRequired,
  onPress: PropTypes.func.isRequired,
  bgc: PropTypes.string,
  fontColor: PropTypes.string,
};

PrimaryBtn.defaultProps = {
  bgc: colors[1001],
  fontColor: colors.white,
};

const simpleBtnStyle = StyleSheet.create({
  containerStyle: {
    height: px2dp(90),
    borderRadius: px2dp(10),
    width: '100%',
  },
  textStyle: {
    fontSize: sizes.f3,
  },
});

const SimpleBtn = ({ bgc, fontColor, ...props }) => {
  const cStyle = [simpleBtnStyle.containerStyle, { backgroundColor: bgc }];
  const tStyle = [simpleBtnStyle.textStyle, { color: fontColor }];

  return <Button containerStyle={cStyle} textStyle={tStyle} {...props} />;
};

SimpleBtn.propTypes = {
  text: PropTypes.string.isRequired,
  onPress: PropTypes.func.isRequired,
  bgc: PropTypes.string.isRequired,
  fontColor: PropTypes.string.isRequired,
};

const transparentBtn = StyleSheet.create({
  containerStyle: {
    height: px2dp(42),
    minWidth: px2dp(120),
    borderRadius: px2dp(6),
    paddingLeft: px2dp(32),
    paddingRight: px2dp(32),
    borderWidth: StyleSheet.hairlineWidth,
  },
  textStyle: {
    fontSize: sizes.f3,
  },
});

const TransparentBtn = ({
  bgc,
  fontColor,
  borderColor,
  containerStyle,
  ...props
}) => {
  const cStyle = [
    transparentBtn.containerStyle,
    { backgroundColor: bgc, borderColor },
    containerStyle,
  ];
  const tStyle = [transparentBtn.textStyle, { color: fontColor }];

  return <Button containerStyle={cStyle} textStyle={tStyle} {...props} />;
};

TransparentBtn.propTypes = {
  text: PropTypes.string.isRequired,
  onPress: PropTypes.func.isRequired,
  bgc: PropTypes.string.isRequired,
  fontColor: PropTypes.string.isRequired,
  borderColor: PropTypes.string,
};
TransparentBtn.defaultProps = {
  borderColor: 'transparent',
};

const buttonStyle = StyleSheet.create({
  containerStyle: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  textStyle: {
    textAlign: 'center',
    textAlignVertical: 'center',
  },
});

export { PrimaryBtn, Button, SimpleBtn, TransparentBtn };
